<!--
 * @Author: wangzhongjie
 * @Date: 2020-04-02 11:34:25
 * @LastEditors: wangzhongjie
 * @LastEditTime: 2020-04-02 14:04:13
 * @Description: 
 * @Email: UvDream@163.com
 -->
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=false" />
    <title></title>
</head>
<script src="https://cdn.bootcss.com/d3/4.10.0/d3.js"></script>

<body>
    <div id="svg"></div>
</body>
<script>
    const dataset = [50, 43, 120, 87, 99, 167, 142];
    const width = 400;
    const height = 400;
    const svg = d3.select("#svg").append("svg").attr("height", height).
    attr("width", width)
    const padding = {
        top: 20,
        left: 20,
        right: 20,
        bottom: 20
    }
    const rectStep = 35;
    const rectWidth = 30;
    svg.selectAll('rect').data(dataset).enter().append("rect").attr("fill", "#999").attr("x", (d, i) => padding.left +
        i * rectStep).attr("y", (d, i) => height - padding.bottom - d).attr("width", rectWidth).attr("height", d =>
        d)
    const text = svg.selectAll("text").data(dataset).enter().append("text").attr("fill", "#fff").attr("font-size",
        "14px").attr("text-anchor", "middle").attr("x", (d, i) => padding.left + i * rectStep).attr("y", (d, i) =>
        height - padding.bottom - d).text(d => d).attr("dx", rectWidth / 2).attr("dy", "1rem")
</script>

</html>